<script setup lang="ts">
import { toRefs } from "vue";
import _ from "lodash";
let props = defineProps(["checked"]);

let emit = defineEmits(["change"]);
let { checked } = toRefs(props);

let handleChange = () => {
  emit("change", !checked?.value);
};
</script>

<template>
  <div class="com-switch" v-if="checked" @click="handleChange">
    <span class="com-checked"></span>
  </div>
  <div class="com-switch-default" v-else @click="handleChange">
    <span class="com-default"></span>
  </div>
</template>

<style lang="less" scoped>
.com-switch {
  display: inline-flex;
  width: 88rpx;
  height: 48rpx;
  background: #3973ff;
  border-radius: 48rpx;
  justify-content: flex-end;
  align-items: center;
  padding: 0 4rpx;
}
.com-checked {
  width: 40rpx;
  height: 40rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.2);
  border-radius: 40rpx;
}

.com-switch-default {
  display: inline-flex;
  width: 88rpx;
  height: 48rpx;
  background: #b5b5bb;
  border-radius: 48rpx;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4rpx;
}

.com-default {
  width: 40rpx;
  height: 40rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(0, 0, 0, 0.2);
  border-radius: 40rpx;
}
</style>
